<template>
    <v-expansion-panel bg-color="#E8EAF6">
        <v-expansion-panel-title>
            <v-row no-gutters>
                <v-col
                    cols="4"
                    class="d-flex justify-start"
                >
                    TEXT
                </v-col>
            </v-row>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
            <div style="margin: 5px 0 5px 0; display: flex">
                <v-select
                    hide-details="auto"
                    density="compact"
                    :label="attr.style.fontFamily === '' ? 'font' : ''"
                    variant="solo-filled"
                    :items="fontFamily"
                    :value="attr.style.fontFamily"
                    @update:modelValue="
                        (value) => {
                            attr.style.fontFamily = value
                            designStore.rerender()
                        }
                    "
                ></v-select>
                <v-select
                    hide-details="auto"
                    density="compact"
                    :label="
                        attr.style.fontSize === '' ? 'font-size' : ''
                    "
                    variant="solo-filled"
                    :items="fontSize"
                    :value="attr.style.fontSize.replace('px', '')"
                    @update:modelValue="
                        (value) => {
                            attr.style.fontSize = value + 'px'
                            designStore.rerender()
                        }
                    "
                ></v-select>
            </div>
            <div
                style="
                    margin: 5px 0 5px 0;
                    display: flex;
                    align-items: center;
                "
            >
                <v-select
                    hide-details="auto"
                    density="compact"
                    :label="
                        attr.style.textDecorationStyle === ''
                            ? 'decoration'
                            : ''
                    "
                    variant="solo-filled"
                    :items="textDecorationStyle"
                    :value="attr.style.textDecorationStyle"
                    @update:modelValue="
                        (value) => {
                            if (attr.style.textDecoration === '') {
                                attr.style.textDecoration = 'underline'
                            }
                            attr.style.textDecorationStyle = value
                            if (value === 'null') {
                                attr.style.textDecoration = ''
                            }
                            designStore.rerender()
                        }
                    "
                ></v-select>
                <ColorPicker
                    :attrAttr="attr"
                    :selectedColor="attr.style.color"
                    colorName="color"
                ></ColorPicker>
            </div>
            <div
                style="
                    margin: 10px 0 5px 0;
                    display: flex;
                    align-items: center;
                "
            >
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.fontWeight === 'bolder'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-format-bold"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.fontWeight =
                                        attr.style.fontWeight ===
                                        'bolder'
                                            ? 'normal'
                                            : 'bolder'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >加粗
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.fontStyle === 'italic'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-format-italic"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.fontStyle =
                                        attr.style.fontStyle ===
                                        'italic'
                                            ? 'normal'
                                            : 'italic'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >斜体
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textDecoration ===
                                    'overline'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-format-overline"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textDecoration =
                                        attr.style.textDecoration ===
                                        'overline'
                                            ? 'normal'
                                            : 'overline'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >上划线
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textDecoration ===
                                    'underline'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-format-underline"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textDecoration =
                                        attr.style.textDecoration ===
                                        'underline'
                                            ? 'normal'
                                            : 'underline'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >下划线
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textDecoration ===
                                    'line-through'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-format-strikethrough-variant"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textDecoration =
                                        attr.style.textDecoration ===
                                        'line-through'
                                            ? 'normal'
                                            : 'line-through'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >删除线
                </v-tooltip>
            </div>
            <div
                style="
                    margin: 10px 0 5px 0;
                    display: flex;
                    align-items: center;
                "
            >
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textTransform ===
                                    'uppercase'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-arrow-up-thick"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textTransform =
                                        attr.style.textTransform ===
                                        'uppercase'
                                            ? 'normal'
                                            : 'uppercase'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >大写
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textTransform ===
                                    'lowpercase'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-arrow-down-thick"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textTransform =
                                        attr.style.textTransform ===
                                        'lowpercase'
                                            ? 'normal'
                                            : 'lowpercase'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >小写
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textTransform ===
                                    'capitalize'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-format-size"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textTransform =
                                        attr.style.textTransform ===
                                        'capitalize'
                                            ? 'normal'
                                            : 'capitalize'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >词首大写
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textIndent === '20px'
                                        ? 'black'
                                        : 'grey'
                            }"
                            icon="mdi-format-indent-increase"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textIndent =
                                        attr.style.textIndent === '20px'
                                            ? ''
                                            : '20px'
                                    designStore.rerender()
                                }
                            "
                        >
                        </v-icon> </template
                    >首行缩进
                </v-tooltip>
            </div>
            <div
                style="
                    margin: 10px 0 5px 0;
                    display: flex;
                    align-items: center;
                "
            >
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textAlign === 'left'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 3px 0 5px"
                            icon="mdi-format-align-left"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textAlign =
                                        attr.style.textAlign === 'left'
                                            ? ''
                                            : 'left'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >水平居左
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textAlign === 'center'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 3px 0 3px"
                            icon="mdi-format-align-center"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textAlign =
                                        attr.style.textAlign ===
                                        'center'
                                            ? ''
                                            : 'center'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >水平居中
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.textAlign === 'right'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 5px 0 3px"
                            icon="mdi-format-align-right"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.textAlign =
                                        attr.style.textAlign === 'right'
                                            ? ''
                                            : 'right'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >水平居右
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <div v-bind="props">
                            <v-icon
                                class="icon"
                                style="margin: 0 2px 0 5px; color: grey"
                                icon="mdi-format-letter-spacing-variant"
                            >
                            </v-icon>
                            <input
                                class="input"
                                :value="
                                    attr.style.letterSpacing.replace(
                                        'px',
                                        ''
                                    )
                                "
                                @change="
                                    (e) => {
                                        attr.style.letterSpacing =
                                            e.target.value + 'px'
                                        designStore.rerender()
                                    }
                                "
                            />
                        </div> </template
                    >字体间距
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <div v-bind="props">
                            <v-icon
                                style="margin: 0 2px 0 5px; color: grey"
                                icon="mdi-format-line-height"
                            >
                            </v-icon>
                            <input
                                class="input"
                                :value="
                                    attr.style.lineHeight.replace(
                                        'px',
                                        ''
                                    )
                                "
                                @change="
                                    (e) => {
                                        attr.style.lineHeight =
                                            e.target.value + 'px'
                                        designStore.rerender()
                                    }
                                "
                            />
                        </div> </template
                    >行高
                </v-tooltip>
            </div>
        </v-expansion-panel-text>
    </v-expansion-panel>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
import ColorPicker from './ColorPicker.vue'

export default {
    name: 'TextArea',
    components: {
        ColorPicker
    },
    props: {
        attrAttr: Object
    },
    data() {
        return {
            designStore: useDesignStore(),
            attr: this.attrAttr,
            fontFamily: ['微软雅黑', '楷体', '黑体', '宋体'],
            fontSize: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 26, 40],
            textDecorationStyle: [
                'null',
                'dashed',
                'dotted',
                'double',
                'wavy',
                'solid'
            ],
        }
    }
}
</script>